import React, { Component } from "react";

export default class App extends Component {
  render() {
    return (
      <div>
        <input />
        {/* 
            注意onClick采用了驼峰式写法，并不是传统html标签的属性onclick，有了这个例子，其他的事件该怎么写就不用我说了吧
            注意方法的后面不需要跟小括号，当然，你也可以在里面现场写函数，不过一般不用这么做

            但是为什么下面给出了这么多种写法呢，因为我们在开发的时候会遇到一个js的难点，那就是this的指向问题，我们来一起看一看
         */}
        <button
          onClick={() => {
            console.log(111,'如果逻辑复杂不建议使用这种写法，this指向未来实例本身');
            console.log(this);
          }}
        >
          click me1
        </button>
        {/* 如果你想修正this指向，就在事件绑定的时候通过 this.handleClick.bind(this) 处理一下  */}
        <button onClick={this.handleClick}>click me2</button>
        <button onClick={this.handleClick3}>click me3</button>
        <button onClick={() => this.handleClick4()}>click me4</button>
      </div>
    );
  }

  handleClick() {
    console.log(222,'this指向undefined，这是因为jsx开启了严格模式，这种方式不是很推荐');
    /*
     你会发现this是undefined，这是因为我们的方法被绑定在了标签的onClick属性上
     未来调用的时候是通过window，而jsx默认的严格模式不允许this去指向window，所以这里就成了undefined
     如果你想修正this指向，就在事件绑定的时候通过 this.handleClick.bind(this) 处理一下 
    */
    console.log(this);
  }

  handleClick3 = () => {
    console.log(333,'this指向未来的组件实例，这种方式比较推荐');
    console.log(this);
  };

  handleClick4 = () => {
    console.log(444,'this指向未来的组件实例，这种方式墙裂推荐，因为未来会有传参的需求场景');
    console.log(this);
  };
}
